<template>
    <div class="container container_form_preview">
        <!-- 新建表单预览 -->
        <keep-alive v-if="type == 1 ">
            <div class="content">
                <!-- img -->
                <img
                    :src="img_cover"
                    style="marginTop: 30px"
                >
                <!-- title -->
                <p class="container_title">{{ param.title }}</p>
                <p
                    v-if="param.desc !== '' "
                    class="container_desc"
                >{{ param.desc }}</p>
                <p class="container_seat" />
                <!-- /title -->

                <!-- cont -->
                <div
                    class="content_main"
                    v-for="(item,index) in list"
                    :key="index"
                >
                    <!-- 单行文本 -->
                    <div
                        class="content_text_list"
                        v-if=" item.type === 1 "
                    >
                        <p
                            class="content_head"
                            v-if=" item.title !== '' "
                        >{{ index + 1 }}.{{ item.title }}</p>
                        <p
                            class="content_head"
                            v-else
                        >{{ index + 1 }}.未命名问题</p>
                        <el-input
                            placeholder="请输入内容"
                            size="small"
                            v-model="item.value"
                        />
                    </div>
                    <!-- /单行文本 -->

                    <!-- 多行文本 -->
                    <div
                        class="content_text_list"
                        v-if=" item.type === 6 "
                    >
                        <p
                            class="content_head"
                            v-if=" item.title !== '' "
                        >{{ index + 1 }}.{{ item.title }}</p>
                        <p
                            class="content_head"
                            v-else
                        >{{ index + 1 }}.未命名问题</p>
                        <el-input
                            type="textarea"
                            autosize
                            placeholder="请输入内容"
                            v-model="item.value"
                        />
                    </div>
                    <!-- /多行文本 -->

                    <!-- 单选 -->
                    <div
                        class="content_radio_list"
                        v-if=" item.type == 2 "
                    >
                        <p
                            class="content_head"
                            v-if=" item.title !== '' "
                        >{{ index + 1 }}.{{ item.title }}</p>
                        <p
                            class="content_head"
                            v-else
                        >{{ index + 1 }}.未命名问题</p>
                        <div
                            class="content_radio"
                            v-for="(itm,idx) in item.options"
                            :key="idx"
                        >
                            <div v-if="itm.option_type == 1">
                                <el-radio
                                    v-model="item.name"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-if="itm.title !== ''"
                                >{{ itm.title }}</el-radio>
                                <el-radio
                                    v-model="item.name"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-else
                                >选项{{ idx + 1 }}</el-radio>
                            </div>
                            <div
                                v-if="itm.option_type == 2"
                                class="content_raiod_other"
                            >
                                <el-radio
                                    v-model="item.name"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-if="itm.title !== ''"
                                >{{ itm.title }}</el-radio>
                                <el-radio
                                    v-model="item.name"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-else
                                >选项{{ idx + 1 }}</el-radio>
                                <input
                                    type="text"
                                    class="content_radio_input"
                                >
                            </div>
                        </div>
                    </div>
                    <!-- /单选 -->

                    <!-- 多选 -->
                    <div
                        class="content_radio_list"
                        v-if=" item.type == 3 "
                    >
                        <p
                            class="content_head"
                            v-if="item.title !== ''"
                        >{{ index + 1 }}.{{ item.title }}</p>
                        <p
                            class="content_head"
                            v-else
                        >{{ index + 1 }}.未命名问题</p>
                        <div
                            class="content_radio"
                            v-for="(itm,idx) in item.options"
                            :key="idx"
                        >
                            <div v-if="itm.option_type == 1">
                                <el-checkbox
                                    v-model="itm.value"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-if="itm.title !== ''"
                                >{{ itm.title }}</el-checkbox>
                                <el-checkbox
                                    v-model="itm.value"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-else
                                >选项{{ idx + 1 }}</el-checkbox>
                            </div>
                            <div
                                v-if="itm.option_type == 2"
                                class="content_raiod_other"
                            >
                                <el-checkbox
                                    v-model="itm.value"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-if="itm.title !== ''"
                                >{{ itm.title }}</el-checkbox>
                                <el-checkbox
                                    v-model="itm.value"
                                    :label="idx"
                                    class="content_radio_text"
                                    v-else
                                >选项{{ idx + 1 }}</el-checkbox>
                                <input
                                    type="text"
                                    class="content_checbox_input"
                                >
                            </div>
                        </div>
                    </div>
                    <!-- /多选 -->

                    <!-- 图片 -->
                    <div
                        class="content_imglist"
                        v-if=" item.type == 8 "
                    >
                        <p
                            class="content_head"
                            v-if="item.title !== ''"
                        >{{ index + 1 }}.{{ item.title }}</p>
                        <p
                            class="content_head"
                            v-else
                        >{{ index + 1 }}.未命名问题</p>
                        <img
                            v-if="qrcode !== '' "
                            :src="qrcode"
                            class="content_image"
                        >
                        <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :limit="1"
                            :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                            v-if="qrcode == '' "
                        >
                            <div
                                :style="{height: '146px'}"
                            >
                                <img
                                    src="http://cdn.zsdx.cn/wei/images/hire/home/camera.png"
                                    class="content_camera"
                                >
                                <p
                                    class="content_camera_text"
                                >上传图片</p>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img
                                width="100%"
                                :src="dialogImageUrl"
                            >
                        </el-dialog>
                    </div>
                    <!-- /图片 -->
                </div>
                <!-- /cont -->

                <div
                    class="zd_msg"
                    v-if="submit_success_msg !== ''"
                >
                    <p class="zd_msg_text">提交成功提示语:</p>
                    <el-input
                        v-model="submit_success_msg"
                        placeholder="请输入提交成功提示语"
                        size="small"
                        :disbled="true"
                    />
                </div>
                <!-- back -->
                <el-button
                    type="primary"
                    class="el_back_foot"
                    size="small"
                    @click="fnGoback()"
                >返回</el-button>
                <!-- /back -->
            </div>
        </keep-alive>
        <!-- 新建表单预览 -->

        <!-- 查看提交表单预览 -->
        <keep-alive v-if="type == 2 ">
            <div
                class="content form_height"
            >
                <!-- title -->
                <p class="container_title">{{ param.title }}</p>
                <p
                    v-if="param.desc !== '' "
                    class="container_desc"
                >{{ param.desc }}</p>
                <p class="container_seat" />
                <!-- /title -->

                <!-- cont -->
                <div
                    class="content_main"
                    v-for="(item,index) in form_config_with_data"
                    :key="index"
                >
                    <!-- 单行文本 -->
                    <div
                        class="content_text_list"
                        v-if=" item.type === 1 "
                    >
                        <p class="content_head" >{{ index + 1 }}.{{ item.title }}</p>
                        <el-input
                            placeholder="请输入内容"
                            size="small"
                            v-model="item.default.value"
                            disabled="true"
                        />
                    </div>
                    <!-- /单行文本 -->

                    <!-- 多行文本 -->
                    <div
                        class="content_text_list"
                        v-if=" item.type === 6 "
                    >
                        <p class="content_head" >{{ index + 1 }}.{{ item.title }}</p>
                        <el-input
                            type="textarea"
                            autosize
                            placeholder="请输入内容"
                            v-model="item.default.value"
                            disabled="true"
                        />
                    </div>
                    <!-- /多行文本 -->

                    <!-- 单选 -->
                    <div
                        class="content_radio_list"
                        v-if=" item.type == 2 "
                    >
                        <p class="content_head">{{ index + 1 }}.{{ item.title }}</p>
                        <div
                            class="content_radio"
                            v-for="(itm,idx) in item.options"
                            :key="idx"
                        >
                            <div v-if="itm.option_type == 1">
                                <el-radio
                                    v-model="item.default.value"
                                    :label="itm.value"
                                    class="content_radio_text"
                                    disabled="true"
                                >{{ itm.title }}</el-radio>
                            </div>
                            <div
                                v-if="itm.option_type == 2"
                                class="content_raiod_other"
                            >
                                <el-radio
                                    v-model="item.default.value"
                                    :label="itm.value"
                                    class="content_radio_text"
                                    disabled="true"
                                >{{ itm.title }}</el-radio>
                                <input
                                    type="text"
                                    class="content_radio_input"
                                    v-model="itm.default_edit_content"
                                >
                            </div>
                        </div>
                    </div>
                    <!-- /单选 -->

                    <!-- 多选 -->
                    <div
                        class="content_radio_list"
                        v-if=" item.type == 3 "
                    >
                        <p class="content_head">{{ index + 1 }}.{{ item.title }}</p>
                        <div
                            class="content_radio"
                            v-for="(itm,idx) in item.options"
                            :key="idx"
                        >
                            <div v-if="itm.option_type == 1">
                                <el-checkbox
                                    v-model="checkAnswer"
                                    :label="itm.value"
                                    class="content_radio_text"
                                    disabled="true"
                                >{{ itm.title }}</el-checkbox>
                            </div>
                            <div
                                v-if="itm.option_type == 2"
                                class="content_raiod_other"
                            >
                                <el-checkbox
                                    v-model="checkAnswer"
                                    :label="itm.value"
                                    class="content_radio_text"
                                    disabled="true"
                                >{{ itm.title }}</el-checkbox>
                                <input
                                    type="text"
                                    class="content_checbox_input"
                                    v-model="itm.default_edit_content"
                                >
                            </div>
                        </div>
                    </div>
                    <!-- /多选 -->

                    <!-- 图片 -->
                    <div
                        class="content_imglist"
                        v-if=" item.type == 8 "
                    >
                        <p class="content_head" >{{ index + 1 }}.{{ item.title }}</p>
                        <img
                            v-if="item.default.value !== '' "
                            :src="item.default.value"
                            class="content_image"
                            :style="{'pointerEvents': 'none'}"
                        >
                        <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :limit="1"
                            :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                            v-if="item.default.value == '' "
                            :style="{'pointerEvents': 'none'}"
                            disabled="true"
                        >
                            <div :style="{height: '146px'}">
                                <img
                                    src="http://cdn.zsdx.cn/wei/images/hire/home/camera.png"
                                    class="content_camera"
                                >
                                <p
                                    class="content_camera_text"
                                >暂无图片</p>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img
                                width="100%"
                                :src="dialogImageUrl"
                            >
                        </el-dialog>
                    </div>
                    <!-- /图片 -->
                </div>
                <!-- /cont -->
                <div
                    class="zd_msg"
                    v-if="submit_success_msg !== ''"
                >
                    <p class="zd_msg_text">提交成功提示语:</p>
                    <el-input
                        v-model="submit_success_msg"
                        placeholder="请输入提交成功提示语"
                        size="small"
                        :disbled="true"
                    />
                </div>
                <!-- back -->
                <el-button
                    type="primary"
                    class="el_back_foot"
                    size="small"
                    @click="fnGoback()"
                >返回</el-button>
                <!-- /back -->
            </div>
        </keep-alive>
        <!-- 查看提交表单预览 -->

        <!-- 蒙层 -->
        <div
            v-if="type == 2"
            class="form_fixed"
            :style="{'height': pageHeight + 'px'}"
        />
        <!-- /蒙层 -->
    </div>
</template>

<script>
/**
 * @param   {Array}         list                    //表单数据
 * @param   {Object}        param                   //表单标题_描述
 * @param   {String}        dialogImageUrl          //图片url
 * @param   {String}        qrcode                  //上传图片链接
 * @param   {String}        type                    //判断那个页面跳转过来
 * @param   {String}        form_no                 //记录上一页参数值，用于返回
 * @param   {String}        form_config_with_data   //查看提交数据
 * @param   {Array}         checkAnswer             //多选填答案
 * @param   {String}        formType                //记录是新增还是表单表单类型
 * @param   {String}        pageHeight              //页面高度记录
 */
export default {
    data () {
        return {
            submit_success_msg: '',
            img_cover: '',
            list: [],
            param: {},
            dialogImageUrl: '',
            qrcode: '',
            dialogVisible: false,
            type: '',
            form_no: '',
            form_config_with_data: [],
            checkAnswer: [],
            formType: '',
            pageHeight: ''
        };
    },
    created () {
        this.setHeader();
        this.getData();
    },
    /**
     * 监听预览表单时是否上传图片,隐藏上传框
     */
    watch: {
        qrcode (val) {
            if (val !== undefined) {
                document.querySelector('.container_form_preview .el-upload--picture-card').style.display = 'none';
            }
        }
    },
    mounted () {
        this.getHeight();
    },
    methods: {
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '自定义表单'
            },
            {
                title: "预览表单"
            }]
            );
        },

        /**
         * 获取页面高度
         */
        getHeight () {
            this.$nextTick(() => {
                console.log(document.querySelector('.form_height'), '1');
                // this.pageHeight = document.querySelector('.form_height').getBoundingClientRect().height;
            });
        },

        /**
         * 获取表单数据
         */
        getData () {
            let query = this.$route.query;

            this.type = Number(query.type);
            this.form_no = query.form_no;
            if (query.id !== undefined) {
                this.$post('/student/custom_form_data%5Cget',{
                    id: query.id
                },resp=>{
                    if (resp.code == 1) {
                        this.$set(this.param, 'title', resp.data.title);
                        this.$set(this.param, 'desc', resp.data.intro);
                        this.form_config_with_data = resp.data.form_config_with_data;
                        this.submit_success_msg = resp.data.submit_success_msg;

                        //获取多选填答案
                        this.form_config_with_data.map(item=>{
                            if (item.type == 3) {
                                item.default.value.map(itm=>{
                                    this.checkAnswer.push(itm.value);
                                });
                            }
                            return;
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'waring',
                            message: resp.msg
                        });
                    }
                });
            } else {
                this.list = JSON.parse(query.list);
                this.param = JSON.parse(query.param);
                this.formType = query.formType;
                this.img_cover = query.image;
                this.submit_success_msg = query.submit_success_msg;
            }
        },

        /**
         * 上传图片
         */
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.qrcode = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        handleRemove(file, fileList) {
            this.qrcode = '';
            document.querySelector('.container_form_preview .el-upload--picture-card').style.display = 'block';
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        /**
         * 上一页
         * @param   {Array}     list            表单数据
         * @param   {Number}    formType        表单类型_编辑还是新增
         * @param   {Object}    param           表单标题和描述
         * @param   {string}    form_no         表单参数
         */
        fnGoback () {
            if (this.type == 1) {
                this.$router.replace({
                    name: 'formNewAdd',
                    query: {
                        list: JSON.stringify(this.list),
                        formType: this.formType,
                        param: JSON.stringify(this.param),
                        form_no: this.form_no,
                        image: this.img_cover,
                        submit_success_msg: this.submit_success_msg
                    }
                });
            } else if (this.type == 2) {
                this.$router.replace({
                    name: 'checkSubmit',
                    query: {
                        form_no: this.form_no
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        background: #ffffff;
        align-items: center;
        .container_title {
            width: 100%;
            color: #3F454B;
            font-size: 18px;
            font-weight: 500;
            height: 25px;
            line-height: 25px;
            margin: 30px auto;
            text-align: center;
        }
        .container_desc {
            width: 1080px;
            line-height: 23px;
            color: #88909C;
            font-size: 14px;
            margin-bottom: 20px;
            text-align: center;
        }
        .container_seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .content_main {
           display: flex;
           flex-direction: column;
           align-items: center;
           .content_text_list {
               margin-bottom: 30px;
           }
           .content_head {
               width: 1008px;
               height: 20px;
               line-height: 20px;
               color: #3F454B;
               font-size: 14px;
               margin-bottom: 10px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
           }
           .content_radio_list {
               margin-bottom: 30px;
               width: 1008px;
               .content_radio {
                   display: flex;
                   flex-direction: column;
                   .content_radio_text {
                       height: 18px;
                       line-height: 18px;
                       margin-top: 15px;
                   }
                   .content_radio_input {
                       border: none;
                       outline: none;
                       border-bottom: 1px #DCDFE6 solid;
                       width: 100%;
                   }
                   .content_checbox_input {
                        border: none;
                        outline: none;
                        border-bottom: 1px #DCDFE6 solid;
                        width: 100%;
                        margin-left: 20px;
                   }
                   .content_raiod_other {
                       display: flex;
                       height: 18px;
                       margin-top: 15px;
                       .content_radio_text {
                           margin-top: 0px;
                       }
                   }
               }
           }
           .content_imglist {
               margin-bottom: 30px;
               width: 1008px;
           }
           .content_image {
               width: 146px;
               height: 146px;
           }
           .content_camera {
               width: 24px;
               height: 24px;
           }
           .content_camera_text {
               position: relative;
               top: -120px;
               font-size: 14px;
               color: #3F454B;
           }
        }
        .zd_msg {
            border: 1px solid #d8dce5;
            padding: 15px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            width: 1008px;
            .zd_msg_text {
                font-size: 14px;
                color: #606266;
                margin-right: 10px;
                white-space: nowrap;
            }
        }
        .el_back_foot {
            margin: 40px auto;

        }
    }
    .form_fixed {
        position: fixed;
        z-index: 10;
    }
}
</style>

<style>
.container_form_preview .el-upload--picture-card {
    background: #F4F4F4 !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    margin: 0 20px 8px 0 !important;
}
/* 全局header样式设置... 我这里权重最大 */
.container .header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
</style>